<template>
  <pacvue-radio
    v-if="bodyCellScoped.record._level_ === 0"
    :model-value="data[bodyCellScoped.$index][radioValKey]"
    :label="true"
    @change="radioChangeHandle({
      ...bodyCellScoped
      ,value: $event
      , radioRow: data[ bodyCellScoped.$index ]
    })"
  >{{ "" }}</pacvue-radio>
</template>
<script>
export default {
  name: 'TypeColumnOfRadio',
  components: {},
  inject: ['busEvent', 'tableIsInit'],
  props: {
    data: Array,
    // 原数据
    bodyCellScoped: Object
  },
  data() {
    return {
      radioValKey: '_typeColumn_radioVal',
      radioIdKey: '_typeColumn_radioId',
      radioOriginDataKey: '_typeColumn_radioOriginData'
      // radio 内置列数据

    }
  },
  computed: {
    // radio选中行数据 - row
    radioCheckedData() {
      if (!this.data?.length) {
        return
      }
      let checkedData
      for (const item of this.data) {
        if (item[ this.radioValKey ]) {
          checkedData = item[ this.radioOriginDataKey ]
          break
        }
      }
      return checkedData
    }
  },
  watch: {
    // 表格是否挂在完成
    tableIsInit: {
      deep: true,
      immediate: true,
      handler(init) {
        if (!init.value) { return }
        if (this.busEvent) {
          // 监听 TypeTable ref 事件
          this.busEvent.value.on('toggleRowRadio', this.toggleRowRadio)
          this.busEvent.value.on('clearRadio', this.clearRadio)
        }
      }
    },
    radioCheckedData() {
      if (this.busEvent) {
        // radio  改变事件
        this.busEvent.value.emit('radio-change', this.radioCheckedData)
      } else {
        // 提供给外部el-table 使用
        this.$emit('radio-change', this.radioCheckedData)
      }
    }
  },
  beforeUnmount() {
    if (this.busEvent) {
      // 解绑 TypeTable ref 事件
      this.busEvent.value.off('toggleRowRadio')
      this.busEvent.value.off('clearRadio')
    }
  },
  methods: {
    // 切换 row radio 状态
    toggleRowRadio(row, checked = true) {
      if (!row) {
        console.warn('Arg: row is not defined')
        return
        // throw Error('Arg: row is not defined')
      }
      if (!this.data?.length) { return }
      const rowOfRadioColDataIndex = this.data.findIndex(item => {
        return item[ this.radioOriginDataKey ] === row
      })
      if (rowOfRadioColDataIndex !== -1) {
        this.setRadioChecked(this.data[ rowOfRadioColDataIndex ], checked)
      }
    },
    // 清除 row radio 状态
    clearRadio() {
      this.clearRadioChecked()
    },
    // 单选框状态改变监听
    radioChangeHandle(event) {
      if (!event) {
        throw Error('event is not defined')
      }
      const { value, radioRow, record, index } = event
      const row = record

      this.setRadioChecked(radioRow, !value)
      this.busEvent.value.emit('radio-click', row, index)
    },
    // 设置radio 选中项
    setRadioChecked(radioRow, checked) {
      if (!radioRow) { return }
      if (!this.data?.length) { return }
      const radioRowId = radioRow[ this.radioIdKey ]
      this.data.forEach(item => {
        const itemId = item[ this.radioIdKey ]
        if (itemId !== radioRowId) {
          item[ this.radioValKey ] = false
        } else {
          item[ this.radioValKey ] = checked
        }
      })
    },
    // 清除 radio选中项
    clearRadioChecked() {
      if (!this.data?.length) {
        return
      }
      this.data.forEach(item => {
        item[ this.radioValKey ] = false
      })
    }

  }
}
</script>
<style lang='scss' scoped>
::v-deep{
  .el-radio__label{
    display: none;
  }
}
</style>
